<template>
  <!-- 我的课程 -->
  <div>
    <el-card class="box-card">
      <p>实名认证</p>
      <p>实名认证通过后（未满18周岁无法认证），通过后可以开启直播</p>
      <el-steps :active="active" finish-status="success" simple style="margin-top: 20px">
        <el-step title="验证手机"></el-step>
        <el-step title="填写身份信息"></el-step>
        <el-step title="实名认证"></el-step>
      </el-steps>
      <!-- 验证手机 -->
      <div v-if="active === 0" class="div-active-1">
        <div class="div-active-2">
          <p>进行实名认证需验证手机</p>
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="form.phone" placeholder="请填写手机号" class="form-input"></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="verificationCode">
              <el-input
                v-model="form.verificationCode"
                placeholder="请填写6位验证码"
                maxlength="6" class="form-input-code1">
              </el-input>
              <el-button @click="send" type="success" :disabled="!show" style="width:140px">获取验证码
                <span v-show="!show" style="font-size:5px" class="count">({{count}}s)</span>
              </el-button>
            </el-form-item>
          </el-form>
          <el-button style="margin-top: 12px;" @click="nextPhone" v-if="active == 0">下一步</el-button>
        </div>
      </div>
      <!-- 填写身份信息 -->
      <div v-if="active === 1" class="div-active-1">
        <div class="div-active-2">
          <p>请输入您的真实姓名和身份证号</p>
          <el-form ref="formStanding" :model="formStanding" :rules="rulesStanding" label-width="80px">
            <el-form-item label="真实姓名" prop="name">
              <el-input v-model="formStanding.name" placeholder="请填写真实姓名" class="form-input"></el-input>
            </el-form-item>
            <el-form-item label="身份证号" prop="idNumber">
              <el-input
                v-model="formStanding.idNumber" placeholder="请填写身份证号" maxlength="18" >
              </el-input>
            </el-form-item>
          </el-form>
          <el-button style="margin-top: 12px;" @click="nextStanding" v-if="active == 1">下一步</el-button>
        </div>
      </div>
      <!-- 实名认证 -->
      <div v-if="active === 2" class="div-active-1">
        <div class="div-active-2">
          <p>实名认证</p>
          <p>文件上传认证</p>
          <el-button style="margin-top: 12px;" @click="nextRealName" v-if="active == 2">完成</el-button>
        </div>
      </div>
      <div v-else-if="active === 3" class="div-active-1">
        <!-- 正在审核 -->
        <div class="p1"  v-loading="true"></div>
        <p style="font-size: 16px;font-weight:900">实名认证中......</p>
        <p style="font-size: 16px;">后台管理员正在审核中</p>
      </div>
    </el-card>
  </div>
</template>

<script>
const TIME_COUNT = 60 // 更改倒计时时间
export default {
  name: 'Authentication',
  data() {
    return {
      // 身份信息表单规则
      rulesStanding:{
        name: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' },
          { validator: this.validatorName, trigger: 'blur' }
        ],
        idNumber: [
          { required: true, message: '请输入身份证号', trigger: 'blur' },
          { validator: this.validatoridNumber, trigger: 'blur' }
        ],
      },
      // 身份信息表单
      formStanding:{
        name: '',
        idNumber: ''
      },
      // 验证手机表单规则
      rules: {
        phone: [
          { required: true, message: '请输入正确的手机号', trigger: 'blur' },
          { validator: this.validatorPhone, trigger: 'blur' }
        ],
        verificationCode: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { validator: this.validatorVerificationCode, trigger: 'blur' }
        ],
      },
      // 验证手机表单
      form: {
        phone: '18561511113'
      },
      // 验证码倒计时
      show: true,
      // 定时器
      count: '',
      // 步骤条起始位置（起始为0）
      active: 0
    };
  },
 methods: {
    nextRealName() {
      this.active = this.active + 1;
    },
    // 验证身份证号
    validatoridNumber(rule, value, callback){
      const reg = /^[1-9]\d{5}(18|19|20)\d{2}(0\d|1[0-2])(0\d|1\d|2\d|3[01])\d{3}[\dX]$/
      if (value && !reg.test(value)) {
        callback(new Error('请输入正确的身份证号'));
      } else {
        callback();
      }
    },
    // 验证名字 
    validatorName(rule, value, callback){
      const reg = /^[\u4e00-\u9fa5·]+$/
      if (value && !reg.test(value)) {
        callback(new Error('请输入正确名称'));
      } else {
        callback();
      }
    },
    nextStanding () {
      this.$refs.formStanding.validate((valid) => {
        if (valid) {
          this.message('success', '验证成功')
          this.active = this.active + 1;
        } else{
          this.message('error', '验证失败')
        }
      });
    },
    // 验证手机号规则
    validatorPhone(rule, value, callback) {
      const reg = /^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[3-8]{1})|(18[0-9]{1})|(19[0-9]{1})|(14[5-7]{1}))+\d{8})$/
      if (value && !reg.test(value)) {
        callback(new Error('请输入正确的手机号'));
      } else {
        callback();
      }
    },
    // 验证码规则
    validatorVerificationCode(rule, value, callback) {
      const reg = /^\d{6}$/;
      if (value && !reg.test(value)) {
        callback(new Error('请输入6位验证码'));
      } else {
        callback();
      }
    },
    // 验证手机,成功后跳转到填写身份信息
    nextPhone() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$axios.post('/user/verifyPhone?phone=' + this.form.phone + '&verificationCode=' + this.form.verificationCode).then(res => {
            if (res.data.flag) {
              this.message('success', '验证成功')
              this.active = this.active + 1;
            } else {
              this.message('error', '验证失败')
            }
          }).catch(err => {
            console.log(err)
          })
        }
      });
    },
    // 发送验证码
    send() {
      // 验证手机号是否符合规则
      this.$refs.form.validateField('phone', (valid) => {
        // 验证通过
        if (!valid) {
          // 验证码倒计时
          if (!this.rest) {
            // 验证码倒计时
            this.count = TIME_COUNT;
            // 验证码按钮不可点击
            this.show = false;
            // 定时器
            this.rest = setInterval(() => {
              if (this.count > 0 && this.count <= TIME_COUNT) {
                this.count--;
              } else {
                this.show = true;
                clearInterval(this.rest); // 清除定时器
                this.rest = null;
              }
            }, 1000);
            // 发送验证码
            this.$axios.post('/user/sendVerificationCode?phone=' + this.form.phone).then(res => {
              if (res.data.flag) {
                // 验证码要钱，显示在弹窗中了
                this.message('success', '验证码为：'+res.data.data+'，请注意查收')
              } else {
                this.message('error', '验证码发送失败')
              }
            }).catch(err => {
              console.log(err)
            })
          }
        }
      });
      
    },
    complete() {
      this.active = this.active + 1;
    },
  }
};
</script>

<style scoped>
.box-card {
  width: 900px;
  margin: 0 auto;
}
.div-active-1 {
  margin-top: 20px;
  width: 100%;
  height: 500px;
  position: relative;
}
.div-active-2 {
  width: 50%;
  height: 200px;
  margin-left: 215px;
  margin-top: 40px;
  position: absolute;
}
.form-input {
  width: 345px;
  height: 40px;
  line-height: 40px;
  float: left;
}
.form-input-code1 {
  width: 200px;
  float: left;
}
.p1{
  width: 100%;
  height: 80px;
}
</style>
